import React from 'react';
import TRANSITION_CONST from 'common/const/transition';
import Event from './events';
import Motions from './motions';

export default function Transition(Component, mod, props) {

  // 拼接animation字符串
  const getTransition = trans => trans ? `${trans.name} ${trans.duration}s ${trans.delay}s` : null;

  // 获取预制动效组
  const setAnimations = () => {
    return TRANSITION_CONST.map(tran => {
      if (mod[tran.key].key.length) {
        let animation = {};
        animation.type = tran.key;
        animation.name = mod[tran.key].key;
        tran.attr.forEach(item => {
          animation[item.key] = mod[tran.key][item.key];
        });
        return animation;
      }
      return null;
    });
  };

  return class extends React.Component {

    constructor() {
      super();
      this.state = {
        animation: null,
        strongAnimationTimes: 0
      };
    }

    setStrongTransition() {
      const strongAnimation = setAnimations()[1];
      if (strongAnimation) {
        let strongTransition = getTransition(strongAnimation);
        this.setState({
          animation: strongTransition
        });
      }
    }

    // 强调动画播放完成
    strongTransitionEnd(strongAnimation) {
      if (strongAnimation.times === 'infinite' || this.state.strongAnimationTimes < strongAnimation.times - 1 ) {
        setTimeout(() => {
          this.setStrongTransition();
        }, strongAnimation.interval * 1000);
      }
      this.setState({
        strongAnimationTimes: this.state.strongAnimationTimes + 1,
        animation: null
      });
    }

    componentDidMount() {
      const enterAnimation = setAnimations()[0];
      const strongAnimation = setAnimations()[1];
      const enterTransition = getTransition(enterAnimation);
      const { node } = this.refs.node.refs;
      if (enterTransition) {
        // 执行入场动画
        this.setState({animation: enterTransition});
        node.addEventListener('webkitAnimationEnd', e => {
          // 入场动画执行完毕，立即执行强调动画

          if (e.animationName === enterAnimation.name ) {
            if (strongAnimation) this.setStrongTransition();
          } else if (e.animationName === strongAnimation.name)
            this.strongTransitionEnd(strongAnimation);
        });
      } else if (strongAnimation) {
        this.setStrongTransition();
        node.addEventListener('webkitAnimationEnd', e => {
          if (e.animationName === strongAnimation.name) this.strongTransitionEnd(strongAnimation);
        });
      }
    }

    render() {
      const { animation } = this.state;

      if (mod.isSupportMotion) {
        const _props = {
          ...props,
          style: {
            width: '100%',
            height: '100%',
            animation: animation,
          },
          ref: 'node'
        };
        return (
          <Motions mod={mod}>
            <Event mod={mod}>
              <Component {..._props}/>
            </Event>
          </Motions>
        );
      }

      const _props = {
        ...props,
        style: {
          position: 'absolute',
          ...mod.style,
          animation: animation,
        },
        ref: 'node'
      };

      return (
        <Event mod={mod}>
          <Component {..._props}/>
        </Event>
      );
    }
  };
}
